<template>
	<div>
     <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header" left-arrow @click-left="$router.go(-1)" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad">  <!-- @load="onLoad" -->
      <van-cell class="news-content" v-for="item in articleList"  @click="oNarticle(item.id)":key="item.id" >
        <ul>
          <li  >
            <div class="fl new-box">
              <span class="new-span">{{item.title}}</span>
              <span class="new-content" v-html="content"></span>
              <div class="new-data">
                <div class="fl data">{{item.updateDate}}</div>
                <div class="fr data">{{item.number}}</div>
              </div>
            </div>
            <div class="fr new-img">
              <img :src="item.funImg" alt="">
            </div>
          </li>
        </ul> 
       </van-cell>
    </van-list>
    
	</div>
</template>
<script type="text/javascript">

import apiHttp from '../../../../../api/index'
import { Toast } from 'vant';
export default {
  data() {
    return {
      id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
      header: "学习园地",
      articleList:[],
      content:"",
      loading: false,
      finished: false,
      total:-1,
      page:0,
    };
  },
  methods: {    
  
    oNarticle(id){
      this.$router.push({path:"/details/details",query: { id: id}});
    },
    // 新闻列表---接口
    getArticleList(){
      let params ={
        page : this.page,
        pageSize :10,
        commId:this.id,
        type:3
      }
      apiHttp.comIndex.getArticleList(params,resp=>{
       if(resp.resultCode == '000000'){
          for(let i = 0; i < resp.data.articleList.length; i++){
            this.articleList.push(resp.data.articleList[i])
          }
          this.total = resp.data.total
          this.loading = false;
        }else{
          Toast(resp.resultMsg)
        }
      })
      
    },
    onLoad(){
      if(this.articleList.length ==this.total){
          this.finished  = true
          this.loading = false;
      }else{
          this.page++
          this.getArticleList();
      }
    }
  }
}
</script>
<style scoped>
   @import '../../../../../assets/css/index.css'; 
   .van-cell{
     width: 90%;
   }
   .new-data{
         margin-top: 1.2rem;
   }
   .new-span{
      display: inline-block;
      font-size: 0.6rem;
      font-weight: bold;
      text-align: left;
      overflow: hidden;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-height: 0.8rem;
      height: 1.6rem;
    }

</style>
